<template>
    <div>
        <TitleHeader name="管理员信息" size="margin-bottom:0"></TitleHeader>
        <p>管理员ID: <span>{{user.id}}</span> </p>
        <p>账号: <span>{{user.account}}</span> </p>
        <p>用户组: <span>{{user.userGroup}}</span> </p>
        <p>创建时间: <span>{{user.ctime}}</span> </p>
        <p>管理员头像:<el-upload class="avatar-uploader" action="http://127.0.0.1:5000/users/avatar_upload" :data="{id}" :show-file-list="false"
           :on-success="handleAvatarSuccess">
        <img v-if="imgUrl" :src="imgUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
        </p>
        <div class="quit"><el-button @click="quit" type="danger">退出</el-button></div>
    </div>
</template>

<script>
import TitleHeader from '../../components/TitleHeader';
import { getuser } from "@/apis/user";
import  { TimeTransition } from "@/utils/utils"
    export default {
        data(){
            return{
                user:{},
                id:localStorage.id,
                imgUrl:''
            }
        },
        components:{
            TitleHeader,
        },
        methods:{
            handleAvatarSuccess(res,file){
               if(res.code==0){
                   this.imgUrl = URL.createObjectURL(file.raw);
                   this.$bus.emit("headerchange",res)

               }
            },
            quit(){
                localStorage.clear();
                location.reload();
               this.$message({type: 'error',message: '退出登录成功!!!',center: true});
            }
        },
        created(){
            getuser({id:this.id}).then(res=>{
                this.user=res.data.accountInfo;
                this.user.ctime=TimeTransition(this.user.ctime)
              this.imgUrl=this.user.imgUrl 

            })
           
        }


    }
</script>

<style lang="less" scoped>
p{
    border-bottom: 1px solid #ccc;
    line-height: 50px;
    span{
        margin-left: 10px;
        font-weight: bold;
    }
}
.user-head{
    display: flex;
    align-items: center;
}
.idlist-table-title{
    margin-bottom: 0   !important;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .quit{
      padding: 20px;
  }
</style>